@import '../../../themes/basic/base-all.less';

:host {
  --ti-formfield-item-padding-bottom: var(--ti-common-space-5x);
  --ti-formfield-item-text-from-line-height: var(--ti-common-line-height-number);
}

.ti3-form-title {
  font-weight: var(--ti-common-font-weight-7);
  line-height: var(--ti-common-size-5x);
  font-size: var(--ti-common-font-size-1);
  color: var(--ti-common-color-text-primary);
  margin-bottom: var(--ti-common-space-5x);
}

.ti3-form {
  text-align: left;
  & > tbody,
  div {
    vertical-align: inherit;
    & tr {
      vertical-align: inherit;
      & > td {
        vertical-align: inherit; // 此处与Tiny2设置不一致
        white-space: normal; //加此属性防止在tiny2表格中使用formfield导致td内容无法换行
        &.ti3-form-label {
          white-space: nowrap;
        }
      }
    }
  }

  .ti3-form-grid-container {
    display: grid;
    .ti3-form-label,
    .ti3-form-require,
    .ti3-form-content {
      padding-bottom: 0;
    }
  }

  .ti3-form-list {
    & > .ti3-form-label,
    & > .ti3-form-require,
    & > .ti3-form-content,
    & > td > .ti3-form-content {
      // 上下表单布局content需要单独设置
      padding-bottom: 0;
    }
  }

  .ti3-form-require {
    padding: 0 var(--ti-common-space-0) var(--ti-formfield-item-padding-bottom) 0;
    .ti3-icon {
      line-height: var(--ti-common-size-7x);
      font-weight: normal;
      color: var(--ti-common-color-error);
      font-size: var(--ti-common-size-4x);
    }
  }

  .ti3-form-require-container {
    width: var(--ti-common-size-4x);
    display: inline-block;
  }

  .ti3-form-label {
    line-height: var(--ti-common-size-7x);
    padding: 0 var(--ti-common-space-5x) var(--ti-formfield-item-padding-bottom) 0;
    color: var(--ti-common-color-text-secondary);
    font-size: var(--ti-common-font-size-base);
  }

  .ti3-form-content {
    word-break: break-word;
    padding-bottom: var(--ti-formfield-item-padding-bottom);
  }

  td.ti3-form-button-item,
  .ti3-form-grid-container + .ti3-form-button-item {
    padding-top: var(--ti-formfield-item-padding-bottom);
  }

  .ti3-text-form {
    & .ti3-text-form-label,
    & .ti3-text-form-content {
      line-height: var(--ti-formfield-item-text-from-line-height);
      padding-top: var(--ti-common-space-10);
      padding-bottom: var(--ti-common-space-10);
    }
    .ti3-text-form-label {
      color: var(--ti-common-color-text-weaken);
    }
  }

  // 上下布局样式
  .ti3-form-top-label {
    display: flex;
    align-items: center;
    color: var(--ti-common-color-text-secondary);
    font-size: var(--ti-common-font-size-base);
    padding-bottom: var(--ti-common-space-2x);
    white-space: nowrap;
  }

  .ti3-form-top-require {
    color: var(--ti-common-color-error);
    font-size: var(--ti-common-size-4x);
  }

  .ti3-form-top-text {
    line-height: var(--ti-common-line-height-number);
  }
}
